<!DOCTYPE html>
<html style="background-color: white;">

<head>
    <link rel="icon" href="images/拉黑小怪兽.png">
    <title>上传</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="" />

    <script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
    <link href="css/button.css" rel='stylesheet' type='text/css' />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800"
        rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
    <link href="css/daohang.css" rel='stylesheet' type='text/css' />
    <style>
        .loginButton {

            margin-top: 5px;
            /* 按钮顶部与输入框的距离 */
            width: 300px;
            height: 40px;
            color: white;
            /* 按钮字体颜色 */
            border: 0;
            /* 删除按钮边框 */
            border-radius: 20px;
            /* 按钮圆角边 */
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
            /* 按钮颜色 */
            cursor: pointer;
        }

        #imageContainer {
            display: flex;
            flex-wrap: wrap;
        }

        .imageWrapper {
            width: 200px;
            margin: 10px;
            overflow: hidden;
        }

        .imageWrapper img {
            width: 100%;
            height: auto;
        }

        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 9999999;
            min-width: 1000px;
        }

        .cd-search {
            width: 60%;
            top: 100%;
            left: 38%;
            border-radius: 25px;
        }

        .cd-search input {
            border-radius: 25px;
        }

        .image-preview {
            display: flex;
            flex-wrap: wrap;
        }

        .image-preview img {
            max-width: 200px;
            margin: 10px;
        }

        /* 样式化自定义的文件上传按钮 */
        .custom-file-upload {
            border: 1px solid white;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
            text-align: center;
            background-color: white;
            color: #333;
            border-radius: 4px;
        }

        /* 隐藏默认的文件上传输入框 */
        #imageInput {
            display: none;
        }

        /* 美化显示上传的图片 */
        #imageContainer {
            display: flex;
            flex-wrap: wrap;
        }

        .uploadedImage {
            max-width: 200px;
            max-height: 200px;
            margin: 10px;
        }


        /* 样式化框 */
        .custom-container {
            display: flex;

            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .custom-box {
            width: 100px;
            height: 100px;
            border: 2px solid grey;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            margin-bottom: 10px;
        }

        /* 当鼠标悬停时改变样式 */
        .custom-box:hover {
            background-color: #f0f0f0;
        }

        .add {
            position: relative;
            top: -5px;
            left: 20px;
        }

        /* 样式化文本 */
        .text-inside-box {
            position: relative;
            top: 18px;
            right: 10px;
        }
    </style>
</head>

<body>
    <!--Header-->
    <div class="top-bar_sub_w3layouts_agile sticky" style="height: 80px; border-bottom: 2px solid grey;">
        <ul class="_ul_ daohangpos"">
							<li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
            <a class="daohang_font" href="shouye.html">首页
                <img src="images/down.png" alt="" id="daohang-img" style="position: relative;left: -5px;width: 18px;">
            </a>
            <a href="remen.html" class="daohang_font">热门</a>
            <a href="xinzuo.html" class="daohang_font">新作</a>
            <a href="guanzhu.html" class="daohang_font">关注</a>
            <a href="cangku.html" class="daohang_font">仓库</a>
            </li>
        </ul>
        <div class="search">
            <div class="right" style="right: 90px;">
                <h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="faxian.html">Photo
                        Go</a></h1>
                <h5>
                    <a style="width: 150px; position: absolute;right:380px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup " href="userinfo.html">修改个人信息</a>
                    <a style="position: absolute;right:250px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup " href="shangchuan.html">上传</a>
                    <a id="tuichu"
                        style="width: 150px; position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup ">退出登录</a>
                </h5>
            </div>
            <div class="cd-main-header">
                <ul class="cd-header-buttons">
                    <li><a class="cd-search-trigger" href="#cd-search"
                            style="position: absolute;right: 10px;top: 35px;"> <span></span></a></li>
                </ul>
                <!-- cd-header-buttons -->
            </div>
            <div id="cd-search" class="cd-search">
                <form action="#" method="post">
                    <input id="sousuo" name="Search" type="search" placeholder="搜索作品">
                </form>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
    </div>
    <div class="banner_bottom" style="height: 669px">
        <div class="container">
            <h3 class="headerw3" style="position: relative;right: 300px;bottom: 80px;">Photos</h3>
            <label for="fileInput" class="custom-file-upload" style="position: relative;right: 300px;bottom: 80px;">
                <div class="custom-container">
                    <div class="custom-box">
                        <span class="add">+</span>
                        <span class="text-inside-box" style="font-size: 3px;">选择图片</span>
                    </div>
                </div>
            </label>
            <input type="file" id="imageInput" accept="image/png,image/jpg" multiple style="display: none;">
            <button onclick="selectImages()" id="fileInput" style="display: none;">
            </button>
            <div class="image-preview" style="position: relative;right: 170px;bottom: 50px;" id="imagePreview"></div>
            <div style="border-left:grey solid 2px;width: 350px;height: 669px;position: absolute;right:0;top:80px;">
                <a id="upload" style="position: relative;top:10px;"><input class="loginButton" type="button" value="上 传"
                        style="width: 200px;" /></a>
                <p
                    style="position: relative;top:50px;right:140px;font-size: 16px;font-weight: 600;color: #222;line-height: 1.25;">
                    标题</p>
                <input id="title" style="position: relative;top: 50px;" maxlength="30" type="text" value="">
                <p
                    style="position: relative;top:100px;right:140px;font-size: 16px;font-weight: 600;color: #222;line-height: 1.25;">
                    描述</p>
                <textarea id="miaoshu"
                    style="width:250px;height: 100px; color: rgba(0, 0, 0, 0.65);border: 2px solid grey;position: relative;top:110px;">
                </textarea>
                <div style="position: relative;top:150px">
                    <label>
                        <input style=" width: 20px;  height: 20px; position: relative;right:20px;" type="radio"
                            name="access" value="private" id="private">
                    </label>
                    <label>
                        <input style=" width: 20px;  height: 20px; position: relative;left:20px;" type="radio"
                            name="access" value="public" id="public">
                    </label>
                </div>
                <p
                    style="position: relative;top:150px;right:30px;font-size: 16px;font-weight: 600;color: #222;line-height: 1.25;">
                    私有</p>
                <p
                    style="position: relative;top:130px;right:-30px;font-size: 16px;font-weight: 600;color: #222;line-height: 1.25;">
                    公有</p>
                <p id="jieguo"
                    style="color: red; position: relative;top:180px;right:-30px;font-size: 16px;font-weight: 600;color:red;line-height: 1.25;">
                </p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        var tuichu = document.getElementById('tuichu');
        const token = localStorage.getItem("token");
        function handleKeyDown(event) {
            if (event.keyCode === 13) {
                var sousuo = document.getElementById('sousuo');
                var d1 = {
                    "description": "",
                }
                d1["description"] = sousuo.value;
                console.log("type", typeof (sousuo.value), "text:", sousuo.value);
                $.ajax({
                    method: 'get',
                    url: 'http://localhost:7777/content/Category/list' + "?description=" + sousuo.value,
                    contentType: 'application/json;charset=UTF-8',
                    success: function (data, status, xhr) {
                        var responseText = xhr.responseText;
                        console.log(responseText);
                        if (responseText.includes("200")) {
                            var result = JSON.parse(responseText);
                            var data = result["data"];
                            console.log("data:", data);
                            var len = data.length;
                            var where = "sousuo.html" + "?";
                            for (var i = 0; i < len; i++)
                                where = where + "id=" + data[i]["id"];
                            console.log(where);
                            window.location.href = where;
                        }
                    },
                    error: function (xhr, status, error) {
                        var responseText = xhr.responseText;
                        console.log("error:", responseText);
                    }
                })
                event.preventDefault(); // 阻止默认的回车提交行为（如果有）
            }
        }
        tuichu.addEventListener("mousedown", function (event) {
            $.ajax({
                method: 'get',
                url: 'http://localhost:7777/logout',
                contentType: 'application/json;charset=UTF-8',
                headers: {
                    "token": token
                },
                success: function (data, status, xhr) {
                    var responseText = xhr.responseText;
                    console.log(responseText);
                    if (responseText.includes("200")) {
                        tuichu.href = "shouyeno.html";
                        tuichu.click();
                    }
                },
                error: function (xhr, status, error) {
                    var responseText = xhr.responseText;
                    console.log("error:", responseText);
                }
            })
        })
        function findNthOccurrence(str, char, n) {
            var count = 0;
            for (var i = 0; i < str.length; i++) {
                if (str[i] === char) {
                    count++;
                    if (count === n) {
                        return i; // 返回第 n 次出现的位置
                    }
                }
            }
            return -1; // 如果找不到第 n 次出现的位置，返回 -1
        }
        var x = 0;
        var upload = document.getElementById("upload");
        console.log("token:", token, "type", typeof (token));
        function dataURItoBlob(dataURI) {
            var byteString = atob(dataURI.split(",")[1]);
            var ab = new ArrayBuffer(byteString.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: "image/jpeg" }); // 使用适当的 MIME 类型
        }
        upload.addEventListener("mousedown", function (event) {
            var count = 0;
            var p = 0;
            var d1 = {};
            var d2 = {
                "title": "",
                "photo": "",
                "summary": "",
                "status": "0",
                "categoryId": ""
            };
            var type = "";
            var xxx = "";
            var link = [];
            for (var i = 0; i < x; i++) {
                const input = document.getElementById('imageInput');
                const file = input.files[i];
                var xmlhttp = new XMLHttpRequest()
                var formData = new FormData();
                formData.append('img', file);
                console.log(formData);
                xmlhttp.open('post', 'http://localhost:7777/upload');
                xmlhttp.setRequestHeader('token', token);
                xmlhttp.onreadystatechange = function (res) {
                    if (xmlhttp.status === 200 && xmlhttp.readyState === 4) {
                        console.log(xmlhttp.response)
                        var responseText = xmlhttp.response;
                        var result = JSON.parse(responseText);
                        xxx = result["data"];

                        count++;

                        ff();
                    }
                }
                xmlhttp.send(formData);
            }
            function ff() {
                if (x != 0 && count == 1) {
                    const url = 'http://47.94.143.212:5000/tag';
                    const formData = new FormData();
                    formData.append('url', xxx); // 替换 'your_data' 为实际的数据

                    fetch(url, {
                        method: 'POST',
                        body: formData,
                        mode: 'cors', // 使用 CORS 模式
                        headers: {
                            // 这里不需要手动设置 Content-Type，FormData 会自动设置正确的 Content-Type
                        },
                    })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json(); // 解析JSON格式的响应
                        })
                        .then(data => {
                            // 处理响应数据
                            console.log(data);
                            type = data["type"];
                            count++;
                            fff();
                        })
                        .catch(error => {
                            // 处理错误
                            console.error('There has been a problem with your fetch operation:', error);
                        });
                }
            }
            function fff() {
                if (x != 0 && count == 2) {
                    var title = document.getElementById("title");
                    var miaoshu = document.getElementById("miaoshu");
                    var pubilc = document.getElementById("public");
                    d2["title"] = title.value;
                    console.log("title:", title.value, "type:", typeof (title.value));
                    var wenben = miaoshu.value;
                    var last = wenben.toString();
                    d2["summary"] = last;
                    console.log("miaoshu:", last, "type:", typeof (last));
                    d2["photo"] = xxx;
                    console.log(xxx);
                    d2["categoryId"] = type;
                    console.log("type:", type);
                    if (pubilc.checked) {
                        d2["status"] = "1";
                    }
                    console.log("link:", link);
                    $.ajax({
                        method: 'post',
                        url: 'http://localhost:7777/content/article',
                        contentType: 'application/json;charset=UTF-8',
                        headers: {
                            "token": token,
                        },
                        data: JSON.stringify(d2),
                        success: function (data, status, xhr) {
                            var responseText = xhr.responseText;
                            console.log(responseText);
                            var pops = document.getElementById("jieguo");
                            pops.innerHTML = "上传成功";
                        },
                        error: function (xhr, status, error) {
                            var responseText = xhr.responseText;
                            console.log(responseText);
                        }
                    })
                }
            }
        }) 
    </script>
    <!-- js -->
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <!-- //js -->
    <!--search-bar-->
    <script src="js/main.js"></script>
    <!--gallery -->
    <script src="js/jquery.chocolat.js"></script>
    <!--light-box-files -->
    <script type="text/javascript">
        $(function () {
            $('.gallery-grid1 a').Chocolat();
        });
    </script>
    <!-- //gallery -->
    <!--//search-bar-->
    <link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
    <!-- start-smoth-scrolling -->
    <script>
        function selectImages() {
            const input = document.getElementById('imageInput');
            input.click(); // 模拟点击文件输入框
        }
        document.getElementById('imageInput').addEventListener('change', handleImageUpload);
        function handleImageUpload(event) {
            const files = event.target.files;
            const imagePreview = document.getElementById('imagePreview');
            if (files && imagePreview) {
                for (const file of files) {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        const imgElement = document.createElement('img');
                        imgElement.src = e.target.result;
                        console.log(imgElement.width);
                        console.log(imgElement.height);
                        imgElement.style.maxWidth = "1000px";
                        imgElement.style.maxHeight = "150px";
                        imgElement.style.width = "auto";
                        imgElement.style.height = "100%";
                        console.log(imgElement.width);
                        console.log(imgElement.style.height);
                        imgElement.id = x;
                        x++;
                        imagePreview.appendChild(imgElement);
                    };
                }
            }
        }
    </script>
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 900);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->

    <script type="text/javascript">
        $(document).ready(function () {
            /*
                                    var defaults = {
                                            containerID: 'toTop', // fading element id
                                        containerHoverID: 'toTopHover', // fading element hover id
                                        scrollSpeed: 1200,
                                        easingType: 'linear' 
                                        };
                                    */

            $().UItoTop({
                easingType: 'easeOutQuart'
            });

        });
    </script>
    <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>


</body>

</html>